<template>
  <div>
    <el-card class="box-card margin_30">
      <div slot="header" class="clearfix">
        <el-button type="primary" size="small" @click="dialogVisible = true">新增</el-button>
      </div>
      <div>
        <el-table
          :data="activeList"
          border
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            fixed="left"
            width="50"
            align="center"
          />
          <el-table-column
            label="商品图片"
            align="center"
            width="250"
          >
            <template v-slot="scope">
              <img style="width:100px;height:100px" :src="scope.row.pic" alt="">
            </template>
          </el-table-column>
          <el-table-column
            label="活动时间"
            align="center"
            width="200"
          >

            <template slot-scope="scope">
              <p>开始时间:{{ scope.row.promotionStartTime }}</p>
              <p>结束时间:{{ scope.row.promotionEndTime }}</p>
            </template>
          </el-table-column>
          <el-table-column
            label="是否过期"
            width="300"
            align="center"
            prop="overdue"
          />
          <el-table-column
            label="商品名称"
            align="center"
            width="200"
            prop="name"
          />
          <el-table-column
            label="品牌名称"
            align="center"
            width="200"
            prop="brandName"
          />
          <el-table-column
            label="商品价格"
            align="center"
            width="200"
            prop="price"
          />
          <el-table-column
            label="商品类别"
            align="center"
            width="200"
            prop="productCategoryName"
          />
          <el-table-column
            label="创建时间"
            align="center"
            width="200"
            prop="createTime"
          />
          <el-table-column
            label="操作"
            fixed="right"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <el-link type="danger" @click="delAddress(scope.row.recommendId)">删除</el-link>
            </template>

          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <List :isactivity="true" @isDialogShow="isDialogShow" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="编辑限时活动"
      :visible.sync="dialogVisible1"
      width="40%"
    >
      <el-form :model="activeInfo" :inline="true" size="mini">
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="商品原价">{{ activeInfo.price }}</el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="商品名称">{{ activeInfo.name }}</el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="促销价格">
              <el-input-number v-model="activeInfo.promotionPrice" :min="1" :max="10" label="描述文字" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="排序">
              <el-input-number v-model="activeInfo.sort" :min="1" :max="10" label="描述文字" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="开始时间">
              <el-date-picker
                v-model="activeInfo.promotionStartTime"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="结束时间">
              <el-date-picker
                v-model="activeInfo.promotionEndTime"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="活动显示数量">
              <el-input v-model="activeInfo.promotionPerLimit " placeholder="" size="mini" clearable />

            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="商品图片">
              <img style="width:150px;height:150px" :src="activeInfo.pic" alt="">
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="addRec">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import { findAllRecommends, addRecommend, delRecommend } from '@/api/marketing/activity/index'
import { findAllBrand } from '@/api/commodityManage/cdList/index'
import List from '@/views/commodityManage/cdList/index.vue'
export default {
  name: 'VueAdminTemplateMasterIndex',
  components: {
    List
  },
  data() {
    return {
      brandList: [],
      dialogVisible: false,
      dialogVisible1: false,
      activeList: [],
      activeInfo: {
        'brandName': '',
        'createTime': '',
        'modifyTime': '',
        'name': '',
        'pic': '',
        'price': '',
        'productCategoryName': '',
        'productId': '',
        'productSn': '',
        'promotionEndTime': '',
        'promotionPerLimit': '',
        'promotionPrice': '',
        'promotionStartTime': '',
        'publishStatus': '',
        'recommendId': '',
        'sort': '',
        'type': ''
      }
    }
  },

  created() {
    this.init()
  },

  mounted() {

  },

  methods: {
    delAddress(id) {
      console.log(id)
      delRecommend(id).then(res => {
        this.init()
      })
    },
    startTime(e) {
      console.log(e)
    },
    addRec() {
      this.dialogVisible1 = false
      addRecommend(this.activeInfo).then(res => {
        this.dialogVisible = false
        this.dialogVisible1 = false
        this.init()
      })
    },
    isDialogShow(val, info) {
      this.dialogVisible1 = val
      this.activeInfo.price = info.price
      this.activeInfo.name = info.name
      this.activeInfo.pic = info.pic
      this.activeInfo.productId = info.id
    },
    init() {
      findAllBrand().then(res => {
        res.data.items.forEach(ele => {
          this.brandList.push(ele.name)
        })
      })
      findAllRecommends().then(res => {
        res.data.items.forEach(ele => {
          var date1 = new Date()
          var date2 = new Date(ele.promotionEndTime)
          if (date1 > date2) {
            ele.overdue = '过期'
          } else {
            ele.overdue = '否'
          }
        })

        this.activeList = res.data.items
      })
    }

  }
}
</script>

<style scoped>

</style>
